<template>
  <div class="field-number">
    <el-input
      :size="size"
      v-model="localValue"
      placeholder=""
      @input="onInput"
      @blur="onBlur"
      :disabled="disabled || readOnly"
    />
    <div
      :class="`${tableField.variable}-precision-box precision-box`"
      v-if="precision"
    >
      {{ precision.join(" / ") }}
    </div>
  </div>
</template>

<script>
import Mixins from './mixins'
export default {
  mixins: [Mixins],
  data() {
    return {
      prev: ''
    }
  },
  computed: {
    precision: function() {
      if (this.tableField.fieldVariableValue) {
        const form = this.tableField.fieldVariableValue.form
        if (form && this.isNumeric(form)) {
          return form.split('.')
        }
      }
      return null
    }
  },
  mounted() {
    this.prev = this.localValue
  },
  methods: {
    onBlur: function() {
      if (this.localValue && String(this.localValue).endsWith('.')) {
        this.localValue = Number(this.localValue)
      }
    },
    onInput: function(val) {
      if (val) {
        let flag
        if (this.isNumeric(val)) {
          if (this.precision) {
            if (/[\.]/.test(val)) {
              const split = val.split('.')
              if (split[0].length > this.precision[0]) {
                flag = true
              }
              if (split[1].length > this.precision[1]) {
                flag = true
              }
            } else {
              if (String(val).length > this.precision[0]) {
                flag = true
              }
            }
          }
        } else {
          flag = true
        }
        if (flag) {
          this.handleAnimation()
          this.localValue = this.prev
        } else {
          this.prev = val
        }
      }
    },
    handleAnimation: function() {
      this.timer && clearTimeout(this.timer)
      const el = document.querySelectorAll(
        `.${this.tableField.variable}-precision-box`
      )
      el.forEach(e => {
        e.classList.add('active')
      })
      this.timer = setTimeout(() => {
        el.forEach(e => {
          e.classList.remove('active')
        })
      }, 500)
    },
    isNumeric: function(str) {
      return /^[0-9]+([.][0-9]*)?$/.test(str)
    }
  }
}
</script>

<style lang="scss" scoped>
.field-number {
  position: relative;
  .precision-box {
    position: absolute;
    top: 0.45rem;
    left: 14rem;
    width: 2rem;
    height: 1rem;
    color: #666666;
    line-height: 1rem;
    transform: scale(0.65);
    -webkit-transform: scale(0.65);
  }
  .active {
    color: #f56c6c;
    animation: skew 0.5s;
  }
}
@keyframes skew {
  0% {
    transform: skew(0);
  }
  25% {
    transform: skew(10deg);
  }
  50% {
    transform: skew(-10deg);
  }
  75% {
    transform: skew(10deg);
  }
  100% {
    transform: skew(0);
  }
}
@-webkit-keyframes skew {
  0% {
    transform: skew(0);
  }
  25% {
    transform: skew(10deg);
  }
  50% {
    transform: skew(-10deg);
  }
  75% {
    transform: skew(10deg);
  }
  100% {
    transform: skew(0);
  }
}
</style>